<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漫威英雄</title>
	 <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/publicpack.css">
	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
	</head>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<!-- 导航容器一般使用nav标签来定义:小屏幕垂直堆叠 -->
	<div id="m_toparea">
    <div class="m_topwrap clearfix">
		<div class="m_topleft fl">
			<img src="img/logo.jpg" />
		</div>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
		         aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		     <span class="navbar-toggler-icon"></span>
		 </button><!-- 缩小浏览器屏幕的时候，导航条会隐藏，右边会出来三条横杠，你点击这个导航条就会向下显示出来，默认为白色横杠 -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a href="index.html" class="cur" >首页</a>
                </li>
                <li class="nav-item">
                    <a class="goTarget" href="#m_news" data-target="m_news">
                        最新动态
                    </a>
                </li>
               <li class="nav-item dropdown">
                   <a class="mwword" href="#" id="navbarDropdown" role="button"
                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       漫威宇宙
                   </a>
                   <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                       <a class="dropdown-item" href="#m_movie">电影</a>
                       <div class="dropdown-divider"></div>
                       <a class="dropdown-item" href="#m_animation">动漫</a>
                   </div>
               </li>
            </ul>
		
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="请再次输入内容" aria-label="Search">
                <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit" onclick="window.open('http://feature.mtime.com/2015/marvel001/character.html')">搜索</button>
            </form>
        </div>
    </div>
	</div>
</nav>


<div class="bd-example mb-4">
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
	<!-- carousel slide---轮播插件----"carousel" 属性用于标记轮播在页面加载时就开始动画播放，无需使用初始化的js函数 -->
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
			<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
        </ol><!-- 滚动底部点击 -->
		
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="banner banner1"></div>
                <div class="carousel-caption d-none d-md-block">
                    <h5>复仇者联盟</h5>
                    <p>《复仇者联盟》（Marvel's The Avengers）是漫威影业出品的一部科幻动作电影，取材自漫威漫画，是漫威电影宇宙的第六部电影，同时也是第一阶段的收官作品。</p>
                </div>
            </div>
            <div class="carousel-item">
                <div class="banner banner2"></div>
                <div class="carousel-caption d-none d-md-block">
                    <h5>绿巨人</h5>
                    <p>浩克（Hulk）是美国漫威漫画旗下的超级英雄，初次登场于《不可思议的浩克》（The Incredible Hulk）第一期（1962年5月），由斯坦·李和杰克·科比联合创造。</p>
                </div>
            </div>
            <div class="carousel-item">
                <div class="banner banner3"></div>
                <div class="carousel-caption d-none d-md-block">
                    <h5>复仇者联盟</h5>
                    <p>《复仇者联盟》（Marvel's The Avengers）是漫威影业出品的一部科幻动作电影，取材自漫威漫画，是漫威电影宇宙的第六部电影，同时也是第一阶段的收官作品。</p>
                </div>
            </div>
			<div class="carousel-item">
			    <div class="banner banner4"></div>
			    <div class="carousel-caption d-none d-md-block">
			        <h5>蜘蛛侠</h5>
			        <p>蜘蛛侠（Spider-Man）是美国漫威漫画旗下的超级英雄，由编剧斯坦·李和画家史蒂夫·迪特科联合创造，初次登场于《惊奇幻想》（Amazing
                        Fantasy）第15期（1962年8月），因为广受欢迎，几个月后，便开始拥有以自己为主角的单行本漫画。</p>
			    </div>
			</div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a><!-- 向左换图 -->
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a><!-- 向右换图 -->
    </div>
</div>
<!-- 最新动态 -->
<div id="m_news">
	<h2 class="m_newstitle"></h2>
	<div class="m_contwrap">
		<div class="m_newlist">
			<div class=" jcarousel-skin-tango">
				<div class="jcarousel-container jcarousel-container-horizontal">
					<div class="jcarousel-prev jcarousel-prev-horizontal"></div>
					<div class="jcarousel-clip jcarousel-clip-horizontal">
						<ul class="clearfix jcarousel-list jcarousel-list-horizontal" id="slider" style="width: 1600px; left: 0px;">
							<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style>
								<div class="m_newspic">
									<a href="http://news.mtime.com/2015/05/27/1543010.html" target="_blank">
										<img src="img/new_pic01.jpg" width="328" height="248" alt="新闻图片" title="新闻图片"/>
									</a>
								</div>
								<div class="m_newswz">
									<h2>初版灭霸演员加盟《美队3》</h2>
									<p>乔什布洛林版将成《复联3》终极BOSS</p>
								</div>
								<span class="m_redline"></span>
							</li>
							<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" jcarouselindex="2" style>
								<div class="m_newspic">
									<a<div class="m_newspic">
									<a href="http://news.mtime.com/2015/05/26/1542971.html" target="_blank">
										<img src="img/new_pic02.jpg" width="328" height="248" alt="新闻图片" title="新闻图片"/>
									</a>
								</div>
								<div class="m_newswz">
									<h2>《蚁人》再发新剧照</h2>
									<p>漫威第二阶段收官之作 7月17日北美上映</p>
								</div>
								<span class="m_redline"></span>
							</li>
							<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal" jcarouselindex="3" style>
								<div class="m_newspic">
									<a<div class="m_newspic">
									<a href="http://avengers.qq.com?ADTAG=media.buy.mtime.zengsong" target="_blank">
										<img src="img/new_pic03.jpg" width="328" height="248" alt="新闻图片" title="新闻图片"/>
									</a>
								</div>
								<div class="m_newswz">
									<h2>《复仇者联盟》动作手游等你来战</h2>
									<p>是英雄，就战起来！</p>
								</div>
								<span class="m_redline"></span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="m_next" data-target="m_movie">
			<a href="#m_movie" name="movie"></a>
		</div>
	</div>
</div>
<div id="m_movie"></div>
<main class="mb-4">
<div class="container" >
    <div class="row">
        <div class="col-md-3 mb-4">
            <div class="card">
                <img src="img/惊奇队长.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">惊奇队长</h5>
                    <p class="card-text">《惊奇队长》是全村的希望，除了她有一张村委主任的脸庞和气质，还集结了钢铁侠的飞行，美队的力量，雷神的电光火花，还有绿巨人的胖揍，黑寡妇的打斗技能也熟练到位...</p>
                    <a class="btn btn-primary">
					
					  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_1">
					    查看详情
					  </button>
					   
					  <!-- 模态框 -->
					  <div class="modal fade" id="myModal_1">
					    <div class="modal-dialog modal-lg">
					      <div class="modal-content">
					   
					        <!-- 模态框头部 -->
					        <div class="modal-header">
					          <h4 class="modal-title">惊奇队长</h4>
					          <button type="button" class="close" data-dismiss="modal">&times;</button>
					        </div>
					        <!-- 模态框主体 -->
					        <div class="modal-body">
					         卡罗尔·丹弗斯（布丽·拉尔森饰）是克里人的精英部队一员，但她挣扎着回忆过去，对于怎么获得超能力、
							 以及之前的人生等超能力之前的人生，她只在梦中有片段不成章的记忆，这层困扰引起的情绪波动也进而
							 影响她对超能力的掌控。所幸，在星际战队指挥官（裘德·洛饰）的调教之下，卡罗尔·丹弗斯学会如何
							 控制自己的力量。
					         一次任务中，卡罗尔·丹弗斯因故来到了地球，并遇到还是低阶探员的尼克·弗瑞（塞缪尔·杰克逊饰），
							 卡罗尔·丹弗斯与尼克·弗瑞一起追捕在地球惹事的斯克鲁人塔罗斯（本·门德尔森饰），
							 同时，也发现自己如何获得超能力 [2]  。
					        </div>
					        <!-- 模态框底部 -->
					        <div class="modal-footer">
					          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
					        </div>
					   
					      </div>
					    </div>
					  </div>
					</a>
                    <a href="#" class="btn btn-light">了解更多</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card">
                <img src="img/黑寡妇.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">黑寡妇</h5>
                    <p class="card-text">本名克莱尔·瓦扬，是第一个以黑寡妇为代号的人物</p>
                   <a class="btn btn-primary">
                   
                     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_2">
                       查看详情
                     </button>
                      
                     <!-- 模态框 -->
                     <div class="modal fade" id="myModal_2">
                       <div class="modal-dialog modal-lg">
                         <div class="modal-content">
                      
                           <!-- 模态框头部 -->
                           <div class="modal-header">
                             <h4 class="modal-title">黑寡妇</h4>
                             <button type="button" class="close" data-dismiss="modal">&times;</button>
                           </div>
                           <!-- 模态框主体 -->
                           <div class="modal-body">
                            第一代：本名克莱尔·瓦扬，是第一个以黑寡妇为代号的人物，初次登场于《神秘的漫画》第4期（1940年8月）。
                            历代黑寡妇
                            历代黑寡妇(3张)
                            第二代：本名娜塔莎·罗曼诺夫，1928年出生于前苏联的斯大林格勒，自幼被苏联情报人员传授各种格斗与暗杀技巧，
							身体经苏联政府秘密机构“红房”改造后，强化了各项体能并延缓了衰老速度，成为苏联在冷战时期的王牌特工，
							代号“黑寡妇”，起初被苏联派往美国从事间谍活动，窃取美国政府秘密科技，后经鹰眼劝说背叛“红房”，加入复仇者联盟，并获得美国国籍。
                            第三代：本名叶莲娜·贝洛娃，当叶莲娜·贝洛娃出现在娜塔莎面前时，娜塔莎发现Black Widow Ops仍然一直在
							不断“出产”着新的黑寡妇特工。叶莲娜打破了Natasha Romanoff在红房创下的所有纪录而成为新的黑寡妇。
							她锐意要成为独一的黑寡妇，因此毫不留情地追击背叛祖国的师姐娜塔莎，不过二人没有分出胜负。后来
							叶莲娜因对自己身世起了疑问而隐退到古巴，成为出名的商人和模特 [2-3]  。
                           </div>
                           <!-- 模态框底部 -->
                           <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                           </div>
                      
                         </div>
                       </div>
                     </div>
                   </a>
                    <a href="#" class="btn btn-light">了解更多</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card">
                <img src="img/复仇者联盟.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">复仇者联盟</h5>
                    <p class="card-text">由六大超级英雄－“钢铁侠”托尼·史塔克（小罗伯特·唐尼饰）、“雷神”索尔·奥丁森（克里斯·海姆斯沃斯饰）、
					“美国队长”史蒂夫·罗杰斯（克里斯·埃文斯饰）、“绿巨人”布鲁斯·班纳（马克·鲁法洛饰）、“黑寡妇”娜塔莎·罗曼诺夫（斯嘉丽·约翰逊饰）
					和“鹰眼”克林特·巴顿（杰瑞米·雷纳饰）组成的“复仇者联盟”应运而生。</p>
                   <a class="btn btn-primary">
                   
                     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_3">
                       查看详情
                     </button>
                      
                     <!-- 模态框 -->
                     <div class="modal fade" id="myModal_3">
                       <div class="modal-dialog modal-lg">
                         <div class="modal-content">
                      
                           <!-- 模态框头部 -->
                           <div class="modal-header">
                             <h4 class="modal-title">复仇者联盟</h4>
                             <button type="button" class="close" data-dismiss="modal">&times;</button>
                           </div>
                           <!-- 模态框主体 -->
                           <div class="modal-body">
                             由六大超级英雄－“钢铁侠”托尼·史塔克（小罗伯特·唐尼饰）、“雷神”索尔·奥丁森（克里斯·海姆斯沃斯饰）、
                             “美国队长”史蒂夫·罗杰斯（克里斯·埃文斯饰）、“绿巨人”布鲁斯·班纳（马克·鲁法洛饰）、“黑寡妇”娜塔莎·
							 罗曼诺夫（斯嘉丽·约翰逊饰）和“鹰眼”克林特·巴顿（杰瑞米·雷纳饰）组成的“复仇者联盟”应运而生。
                           </div>
                           <!-- 模态框底部 -->
                           <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                           </div>
                      
                         </div>
                       </div>
                     </div>
                   </a>
                    <a href="#" class="btn btn-light">了解更多</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card">
                <img src="img/复仇者联盟2.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">复仇者联盟2</h5>
                    <p class="card-text">身经百战的超级英雄们产生了职业倦怠...</p>
                   <a class="btn btn-primary">
                   
                     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_4">
                       查看详情
                     </button>
                      
                     <!-- 模态框 -->
                     <div class="modal fade" id="myModal_4">
                       <div class="modal-dialog modal-lg">
                         <div class="modal-content">
                      
                           <!-- 模态框头部 -->
                           <div class="modal-header">
                             <h4 class="modal-title">复仇者联盟2</h4>
                             <button type="button" class="close" data-dismiss="modal">&times;</button>
                           </div>
                           <!-- 模态框主体 -->
                           <div class="modal-body">
                            《复仇者联盟2：奥创纪元》（Avengers: Age of Ultron）是漫威影业出品的一部科幻冒险电影，
							取材自漫威漫画，是漫威电影宇宙的第十一部电影。由乔斯·韦登执导，小罗伯特·唐尼、克里斯·
							海姆斯沃斯、马克·鲁法洛、克里斯·埃文斯、斯嘉丽·约翰逊和杰瑞米·雷纳主演。影片于2015年
							5月1日在北美上映。影片讲述当钢铁侠试图启动处于休眠状态的维持和平计划时，计划出了差错
							。于是，在地球面临生死存 ...
                           </div>
                           <!-- 模态框底部 -->
                           <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                           </div>
                      
                         </div>
                       </div>
                     </div>
                   </a>
                    <a href="#" class="btn btn-light">了解更多</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card">
                <img src="img/marvelsironmanvr_lob_crd_02.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">钢铁侠</h5>
                    <p class="card-text">托尼·史塔克（小罗伯特·唐尼饰）出生在纽约一个富豪家庭，从小衣来伸手饭来张口的他，并未像所有的纨绔子弟那般只知道享乐胡闹。天生聪慧的史塔克却是个出奇的天才，17岁毕业于麻省理工大学电力工程系，并以傲人的成绩成功找到了自己的社会定位——其家族企业史塔克军火公司的新老板。</p>
                   <a class="btn btn-primary">
                   
                     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_5">
                       查看详情
                     </button>
                      
                     <!-- 模态框 -->
                     <div class="modal fade" id="myModal_5">
                       <div class="modal-dialog modal-lg">
                         <div class="modal-content">
                      
                           <!-- 模态框头部 -->
                           <div class="modal-header">
                             <h4 class="modal-title">钢铁侠</h4>
                             <button type="button" class="close" data-dismiss="modal">&times;</button>
                           </div>
                           <!-- 模态框主体 -->
                           <div class="modal-body">
                             《钢铁侠》（Iron Man）是由美国漫威电影工作室出品的一部科幻冒险电影，改编自同名系列漫画，由乔恩·费儒执导，
							 小罗伯特·唐尼及格温妮斯·帕特洛、杰夫·布里吉斯等主演。该作也是“漫威电影宇宙”系列的首部电影。该片于2008年
							 5月2日在美国上映，2008年4月30日在中国大陆上映。
                             影片讲述了托尼·史塔克在遇难后改进了盔甲的功能，化身“钢铁侠”，以一个义务警察的身份保护了这个世界和平的故事
                           </div>
                           <!-- 模态框底部 -->
                           <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                           </div>
                      
                         </div>
                       </div>
                     </div>
                   </a>
                    <a href="#" class="btn btn-light">了解更多</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card">
                <img src="img/marvelsspider-man_lob_crd_02.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">蜘蛛侠</h5>
                    <p class="card-text">彼得·帕克在超级英雄身份与高中生活之间面临的抉择。15岁的高中生，
					在被受放射性感染的蜘蛛咬伤后，便获得了蜘蛛般的能力。在恩师托尼·斯塔克的协助下，
					试图以纽约市皇后区的一名普通高中生和打击犯罪的超级英雄蜘蛛侠间保持平衡</p>
                  <a class="btn btn-primary">
                  
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_6">
                      查看详情
                    </button>
                     
                    <!-- 模态框 -->
                    <div class="modal fade" id="myModal_6">
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                     
                          <!-- 模态框头部 -->
                          <div class="modal-header">
                            <h4 class="modal-title">蜘蛛侠</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                          </div>
                          <!-- 模态框主体 -->
                          <div class="modal-body">
                           彼得·帕克（Peter Parker）即蜘蛛侠（Spider-Man），是美国漫威漫画旗下超级英雄，
						   由编剧斯坦·李和画家史蒂夫·迪特科联合创造，初次登场于《惊奇幻想》（Amazing Fantasy）
						   第15期（1962年8月），因为广受欢迎，几个月后，便开始拥有以自己为主角的单行本漫画。
                           蜘蛛侠全名彼得·本杰明·帕克（Peter Benjamin Parker），是美国的一名普通学生，毕业后成为《
						   号角日报》的记者。由于意外被一只受过放射性感染的蜘蛛咬伤，因此获得了和蜘蛛一样的超能力、
						   超人般的耐力、反应、敏捷和速度。并发明了蛛网发射器，从此化身蜘蛛侠（Spider-Man）守卫纽约。
                          </div>
                          <!-- 模态框底部 -->
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                          </div>
                     
                        </div>
                      </div>
                    </div>
                  </a>
                    <a href="#" class="btn btn-light">了解更多</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card">
                <img src="img/marvelstrikeforce_lob_crd_01.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">灭霸</h5>
                    <p class="card-text">是出生在泰坦星的永恒一族，实力极其强大。这给予了他无法超越的力量、持久力、恢复能力和敏捷度。他的皮肤近乎无法摧毁，尤其是在对抗冷、热、电、辐射、毒、衰老和疾病的时候。 在他被暗恋者死亡女神诅咒成为永生之前，他就可以不吃任何东西而生存。</p>
                   <a class="btn btn-primary">
                   
                     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_7">
                       查看详情
                     </button>
                      
                     <!-- 模态框 -->
                     <div class="modal fade" id="myModal_7">
                       <div class="modal-dialog modal-lg">
                         <div class="modal-content">
                      
                           <!-- 模态框头部 -->
                           <div class="modal-header">
                             <h4 class="modal-title">灭霸</h4>
                             <button type="button" class="close" data-dismiss="modal">&times;</button>
                           </div>
                           <!-- 模态框主体 -->
                           <div class="modal-body">
                             灭霸，英文名是Thanos，音译为萨诺斯，是美国漫威漫画旗下的超级反派，初次登场于《钢铁侠》（Iron Man）第55期（1973年1月）。
							 是出生在泰坦星的永恒一族，实力极其强大。这给予了他无法超越的力量、持久力、恢复能力和敏捷度。他的皮肤近乎无法摧毁，
							 尤其是在对抗冷、热、电、辐射、毒、衰老和疾病的时候。 在他被暗恋者死亡女神诅咒成为永生之前，他就可以不吃任何东西而生存。 [1] 
                             灭霸的精神也是近乎无敌的，这使得他对于绝大多数精神攻击都能产生免疫能力，与此同时他可以使出能量波或是通过双眼双手释放出等离子能或者宇宙能。
                             同时，灭霸还是一位战略家，拥有远远超越地球科技的知识，有时候乘坐一个装有进攻性武器且能穿越银河的浮空王座，曾经拥有宇宙立方、无限手套、宇宙之心等装备。 [1] 
                           </div>
                           <!-- 模态框底部 -->
                           <div class="modal-footer">
                             <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                           </div>
                      
                         </div>
                       </div>
                     </div>
                   </a>
                    <a href="#" class="btn btn-light">了解更多</a>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-4">
            <div class="card">
                <img src="img/marvelultimatealliance3_lob_crd_02.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">金刚狼</h5>
                    <p class="card-text">詹姆斯·豪利特（James Howlett）即金刚狼（Wolverine），是美国漫威漫画旗下的超级英雄，
					初次登场于《不可思议的浩克》（The Incredible Hulk）第180期（1974年10月）。由莱恩·韦恩、约翰·罗密塔、
					贺伯特·林普联合创造。罗根(Logan) 是他生父的姓。十九世纪1832年出生于加拿大的阿尔伯塔省，自从儿时发现自己
					的生父杀死自己的养父后，罗根的变种人能力便开始显现出来，他拥有延缓衰老和极强的自愈能力，双手还可以伸出利爪。</p>
                  <a class="btn btn-primary">
                  
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_8">
                      查看详情
                    </button>
                     
                    <!-- 模态框 -->
                    <div class="modal fade" id="myModal_8">
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                     
                          <!-- 模态框头部 -->
                          <div class="modal-header">
                            <h4 class="modal-title">金刚狼</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                          </div>
                          <!-- 模态框主体 -->
                          <div class="modal-body">
                            金刚狼（Wolverine，原意为“狼獾”。注意狼的英文是''Wolf''），最早是出现在漫威漫画出版物中的超级英雄虚构人物。
							首次出现于《不可思议的绿巨人》第180期(1974年十月)，由作家莱恩·韦恩与艺术指导约翰·罗密塔角色设计，
							贺伯特·林普所绘。《Giant-Size X-Men》第一期(1975年5月)，金刚狼编入X战警的“All New, All Different”团队。
							《X战警》作家克里斯·克雷蒙与同绘者约翰·布莱恩，赋予金刚狼为重要角色，强调金刚狼年纪比其他成员年长。
							漫画家弗兰克·米勒与克雷蒙合作，协助重新修正金刚狼角色，1982年十二月出版分为四部著名期限系列，
							以“I'm the best there is at what I do, but what I do isn't very nice.”作为口号再次登台。
                          </div>
                          <!-- 模态框底部 -->
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                          </div>
                     
                        </div>
                      </div>
                    </div>
                  </a>
                    <a href="#" class="btn btn-light">了解更多</a>
                </div>
            </div>
        </div>
    </div>
</div>
</main>
<div id="m_animation">
	<div class="m_contwrap">
		<h2 class="m_antitle">漫 威 动 漫</h2>
		<a class="m_ljgd" target="_blank" href="2.html">
			了解更多角色...
		</a>
		<ul class="m_animationvideo clearfix">
			<li>
				<a href="http://www.youku.com/show_page/id_zd9908b98c4d811e1b2ac.html" class="animation">
					<img src="img/dm_pic01.jpg" width="229" height="129" alt="图"/>
					<em class="m_video02"></em>
				</a>
				<span class="m_shadow"></span>
				<h4>
					终极蜘蛛侠 第一季预告片
					<a href="http://www.youku.com/show_page/id_zd9908b98c4d811e1b2ac.html" target="_blank">
						正片
					</a>
				</h4>
			</li>
			<li>
				<a href="http://www.youku.com/show_page/id_zff3b275a637411e296ac.html?from=y1.6-100.2.2-2.1-7-1-1-0" class="animation">
					<img src="img/dm_pic02.jpg" width="229" height="129" alt="图"/>
					<em class="m_video02"></em>
				</a>
				<span class="m_shadow"></span>
				<h4>
					终极蜘蛛侠 第二季预告片
					<a href="http://www.youku.com/show_page/id_zff3b275a637411e296ac.html?from=y1.6-100.2.2-2.1-7-1-1-0" target="_blank">
						正片
					</a>
				</h4>
			</li>
			<li>
				<a href="http://www.youku.com/show_page/id_z96adb5a8f6c211e3b8b7.html?from=y1.6-100.2.1-2.1-7-1-0-0" class="animation">
					<img src="img/dm_pic03.jpg" width="229" height="129" alt="图"/>
					<em class="m_video02"></em>
				</a>
				<span class="m_shadow"></span>
				<h4>
					终极蜘蛛侠  第三季预告片
					<a href="http://www.youku.com/show_page/id_z96adb5a8f6c211e3b8b7.html?from=y1.6-100.2.1-2.1-7-1-0-0" target="_blank">
						正片
					</a>
				</h4>
			</li>
			<li>
				<a href="http://www.youku.com/show_page/id_zd9908b98c4d811e1b2ac.html" class="animation">
					<img src="img/dm_pic04.jpg" width="229" height="129" alt="图"/>
					<em class="m_video02"></em>
				</a>
				<span class="m_shadow"></span>
				<h4>
					终极蜘蛛侠 精彩片段
					<a href="http://www.youku.com/show_page/id_zd9908b98c4d811e1b2ac.html" target="_blank">
						正片
					</a>
				</h4>
			</li>
		</ul>
		<div class="m_animationnr">
			<!-- <a class="mprev notprev"></a>
			<a class="mnext notnext"></a> -->
			<div class="m_anipicwrap">
				<ul class="m_apiclist clearfix" style="left: 0px;">
					<li>
						<div class="m_anr">
							<a href="#">
							<img src="img/dm_pic05.jpg" >
							<span class="m_shadow"></span>
							</a>
							<h2>《奥创纪元 1》</h2>
							<p>当蜘蛛女侠发现反派组织智慧帮获得了一尊表面看来像宇宙骑士的物体时，
							复仇者们还对即将到来的灾变一无所知。宇宙骑士随后化身
							为致力于灭绝人类的人工智能奥创，人类文明沦陷了。</p>
						</div>
					</li>
					<li>
						<div class="m_anr">
							<a href="#">
							<img src="img/dm_pic06.jpg" >
							<span class="m_shadow"></span>
							</a>
							<h2>《奥创纪元 2》</h2>
							<p>苏珊•理查兹怀着复杂的心情跟着金刚狼一起回到了过去。
							原本打算要阻止金刚狼的苏珊，在最后关头却动摇了……当两人
							再度回到未来时，等着他们的却是另一场噩梦。</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h3>超级英雄相关电影</h3>
                <p>喜爱超级英雄的朋友们，来加入我们的队伍吧。</p>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">
                        <ul>
                            <li>蝙蝠侠系列</li>
                            <li><a href="">蝙蝠侠</a></li>
                            <li><a href="">蝙蝠侠与罗宾</a></li>
                            <li><a href="">蝙蝠侠归来</a></li>
                            <li><a href="">蝙蝠侠前传</a></li>
                        </ul>
                    </div>
                    <div class="col-md-3">
                        <ul>
                            <li>X战警系列</li>
                            <li><a href="">X战警</a></li>
                            <li><a href="">X战警前传</a></li>
                            <li><a href="">X战警金刚狼</a></li>
                        </ul>
                    </div>
                    <div class="col-md-3">
                        <ul>
                            <li>蜘蛛侠系列</li>
                            <li><a href="">蜘蛛侠1</a></li>
                            <li><a href="">蜘蛛侠2</a></li>
                            <li><a href="">蜘蛛侠3</a></li>
                        </ul>
                    </div>
                    <div class="col-md-3">
                        <ul>
                            <li>复仇者联盟联盟</li>
                            <li><a href="">复仇者联盟1</a></li>
                            <li><a href="">复仇者联盟2</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>